<template>
  <div class="relation-container">
    <div ref="commandstats" style="width: 100%; height: 100%;overflow-x: auto"></div>
  </div>
</template>

<script setup name="Relation" lang="ts">
import {getRelationApi} from '@/api/business/businessUser';
import * as echarts from 'echarts';

const commandstats = ref("");
const route = useRoute();
const dataList = ref([]);
const getList = async (userId) => {
  const res = await getRelationApi(userId);
  dataList.value = [res.data];
  console.log(dataList.value)
  initEcharts();
};

//初始化树状图
const initEcharts = () => {
  const commandstatsIntance = echarts.init(commandstats.value, 'macarons');
  commandstatsIntance.setOption({
    tooltip: {
      trigger: 'item',
      triggerOn: 'mousemove',
      formatter: '{b}'
    },
    series: [
      {
        type: 'tree',
        id: 0,
        name: 'tree1',
        data: dataList.value,
        top: '0%',
        left: '4%',
        bottom: '0%',
        right: '10%',
        symbolSize: 10,
        symbol: "rect",
        edgeShape: 'polyline',
        edgeForkPosition: '63%',
        initialTreeDepth: 3,
        lineStyle: {
          width: 2
        },
        zoom: 1,
        height: '100%',
        label: {
          backgroundColor: '#fff',
          position: 'left',
          verticalAlign: 'middle',
          align: 'left',
          color: '#000',
          // formatter: (params) => {
          //   return params.data.name + ' [' + params.data.vip + ']';
          // },
          formatter: ['{b}'].join('\n'),
          rich: {
            box: {
              align: 'center',
              color: 'red'
            }
          }
        },
        leaves: {
          label: {
            position: 'left',
            verticalAlign: 'middle',
            align: 'left',
            // color: '#000',
            formatter: ['{b}'].join('\n'),
            rich: {
              box: {
                align: 'center',
                color: 'red'
              }
            }
          },
        },
        emphasis: {
          focus: 'descendant'
        },
        expandAndCollapse: true,
        animationDuration: 550,
        animationDurationUpdate: 750,

      }
    ]
  });
  window.addEventListener('resize', () => {
    commandstatsIntance.resize();
  });
}

onMounted(() => {
  getList(route.query && (route.query.userId as string));
});
</script>

<style scoped>
.relation-container {
  width: 100%;
  height: 200vh;
}
</style>
